<template>
  <div>
    <!-- 头部栏  黑马程序员.vant -->
    <top :f1="false" :f2="false"></top>
    <!-- 内容主体 -->
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img v-lazy="item">
      </van-swipe-item>
    </van-swipe>

    <!-- 九宫格 -->
    <van-grid :border="false" :column-num="3" icon-size='60'>
      <van-grid-item :icon="imgGrid[0]" text="新闻资讯" to="/newslist"></van-grid-item>
      <van-grid-item :icon="imgGrid[1]" text="图片分享" to="/photo/list"></van-grid-item>
      <van-grid-item :icon="imgGrid[2]" text="商品购买" to="/goods/list"></van-grid-item>
      <van-grid-item :icon="imgGrid[3]" text="留言反馈" ></van-grid-item>
      <van-grid-item :icon="imgGrid[4]" text="视频专区"></van-grid-item>
      <van-grid-item :icon="imgGrid[5]" text="联系我们"></van-grid-item>
    </van-grid>

    <!-- 底部栏  -->
    <bottom></bottom>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片
      images: [],
      // 九宫格图片
      imgGrid: [
        require('../assets/images/menu1.png'),
        require('../assets/images/menu2.png'),
        require('../assets/images/menu3.png'),
        require('../assets/images/menu4.png'),
        require('../assets/images/menu5.png'),
        require('../assets/images/menu6.png')
      ]
    }
  },
  created() {
    this.getImg()
  },
  methods: {
    //  获取轮播图的API地址
    async getImg() {
      const res = await this.axios.get('/api/getlunbo')
      if (res.status !== 200) {
        return console.log('获取轮播图数据失败')
      }
      const img = res.data.message.map(item => {
        return item.img
      })
      this.images = img
    }
  }
}
</script>

<style lang="less" scoped>
.van-swipe {
  // width: 100%;
  height: 200px;
  padding-top: 40px;
  img {
    width: 100%;
    height: 200px;
  }
}
</style>
